<template>

    <div>
       <div v-show="active==1">
           <span style="margin-left: 500px;font-size: 30px">设备油耗</span>

           <el-divider content-position="right"></el-divider>

           <div style="width: 600px">
               <span style="font-size:20px;color: red">基本信息</span>
               <el-form ref="form" :model="DeviceOilUsed" label-width="80px">
                   <el-form-item label="项目名称">
                       <el-input v-model="DeviceOilUsed.projectName" @focus="getPid" readonly ></el-input>
                   </el-form-item>
                   <el-form-item label="开始日期">
                       <el-col :span="11">
                           <el-date-picker type="date" placeholder="选择日期" v-model="DeviceOilUsed.startdate" style="width: 100%;"  value-format="yyyy-MM-dd"></el-date-picker>
                       </el-col>
                   </el-form-item>
                   <el-form-item label="结束日期">
                       <el-col :span="11">
                           <el-date-picker type="date" placeholder="选择日期" v-model="DeviceOilUsed.enddate" style="width: 100%;"  value-format="yyyy-MM-dd"></el-date-picker>
                       </el-col>
                   </el-form-item>
                   <el-form-item label="备注">
                       <el-input type="textarea" v-model="DeviceOilUsed.comment"></el-input>
                   </el-form-item>
                   <el-divider content-position="right"></el-divider>
                   <span style="font-size:20px;color: red">附件</span>
                   <el-container>
                       <el-form-item label="相关文件:">
                           <el-upload
                                   name="multipartfile"
                                   action="http://localhost/upload"
                                   :headers="{token:this.$store.state.token}"
                                   :data="{folder:'DeviceOilUsed'}"
                                   class="upload-demo"
                                   ref="upload"
                                   :limit="1"
                                   :multiple="false"
                                   :auto-upload="false"
                                   :on-success="handleUploadSuccess">
                               <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                               <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                           </el-upload>
                       </el-form-item>
                       <el-input v-model="DeviceOilUsed.files" v-show="false"></el-input>
                   </el-container>
                   <el-table
                           :data="enclosures"
                           border
                           style="width: 100%"
                           v-if="enclosureTab">
                       <el-table-column
                               fixed
                               prop="fileName"
                               label="文件名">
                       </el-table-column>
                       <el-table-column
                               prop="realName"
                               label="上传人">
                       </el-table-column>
                       <el-table-column
                               prop="time"
                               label="上传时间">
                       </el-table-column>
                       <el-table-column
                               fixed="right"
                               label="操作">
                           <template slot-scope="scope">
                               <el-button @click="selectEnclosure(scope.row)" type="text" size="small">查看</el-button>
                               <el-button @click="delEnclosure(scope.row)" type="text" size="small">删除</el-button>
                           </template>
                       </el-table-column>
                   </el-table>
                   <el-divider content-position="right"></el-divider>
                   <span style="font-size:20px;color: red">设备需用计划明细</span>




                   <el-table :data="materialInfos"
                             stripe
                             border>
                       <el-table-column label="设备名称" :resizable="true">
                           <template scope="scope">
                               <el-input v-model="scope.row.materialName" readonly @focus="getMaterialName"></el-input>
                           </template>
                       </el-table-column>
                       <el-table-column
                               prop="unitModel"
                               label="规格型号">
                       </el-table-column>
                       <el-table-column
                               prop="unit"
                               label="单位">
                       </el-table-column>
                       <el-table-column label="耗油量" :resizable="true">
                           <template scope="scope">
                               <el-input type="number" @blur="getprice(scope.row)" v-model="scope.row.useCount"></el-input>
                           </template>
                       </el-table-column>
                       <el-table-column label="油价" :resizable="true">
                           <template scope="scope">
                               <el-input type="number" @blur="getprice(scope.row)"  v-model="scope.row.oilPrice"></el-input>
                           </template>
                       </el-table-column>
                       <el-table-column
                               prop="usedFee"
                               label="邮费">
                       </el-table-column>
                   </el-table>
                   <div>
                       <span>总价:{{price}}</span>
                   </div>



                   <el-form-item>
                       <el-button type="primary" @click="save" style="margin-left: 600px" v-if="saveStatus">立即创建</el-button>
                       <el-button type="primary" @click="update" style="margin-left: 600px" v-if="updateStatus">修改</el-button>
                   </el-form-item>
               </el-form>

           </div>


           <el-dialog
                   title="项目名称"
                   :visible.sync="dialogVisible"
                   width="70%">
               <project-type-big-data v-on:row="row" v-if="dialogVisible" ></project-type-big-data>
           </el-dialog>

           <el-dialog
                   title="设备名称选择"
                   :visible.sync="dialogVisible2"
                   width="60%">
               <material-name-big-data v-on:checked="checked" ></material-name-big-data>
           </el-dialog>
       </div>

       <div>
           <photo v-show="active==2" v-on:fh="Phonefh"  :phonePath="phonePath" ></photo>
       </div>

    </div>
</template>

<script>

    import ProjectTypeBigData from '../../../components/common/projectInfo/ProjectInfoList.vue'
    import MaterialNameBigData from '../../../components/common/material/MaterialList.vue'
    import Photo from '../modularOne/Photo.vue'

    import  DeviceOilUsedService from '../../../model/mfy/DeviceOilUsedService.js'
    const deviceOilUsedService= DeviceOilUsedService.getInstance();

    export default {
        name: "DeviceOilUsed",
        data(){
            return{
                active:1,
                DeviceOilUsed:{},
                dialogVisible:false,
                dialogVisible2:false,
                enclosures:[],//附件
                enclosureTab:false,
                phonePath:'',
                saveStatus:true,
                price:'',
                updateStatus:false,
                materialInfos:[
                    {
                        'materialName':'',
                        'unitModel':'',
                        'unit':'',
                        'useCount':'',
                        'oilPrice':'',
                    }
                ],
                attids:''
            }
        },
        methods:{
            getprice(row){
                row.usedFee=row.useCount*row.oilPrice;
                var p = 0;
                this.materialInfos.forEach(i=>{
                    p=p+i.usedFee
                })
                this.price=p;
            },
            getPid(){
                this.dialogVisible=true
            },
            row(row){
                this.dialogVisible=false
                this.DeviceOilUsed.projectName=row.projectName
                this.DeviceOilUsed.pId=row.id
            },
            submitUpload(){
                this.$refs.upload.submit();
            },
            handleUploadSuccess(response,file){
                this.enclosureTab=true
                var enclosure ={};
                enclosure.fileName = file.name
                enclosure.filePath = response.data
                enclosure.time = this.datetime();
                enclosure.realName = sessionStorage.getItem("realName")
                this.enclosures.push(enclosure)
                this.DeviceOilUsed.filePath = response.data
            },
            selectEnclosure(row){
                this.phonePath=row.filePath
                this.active++
            },
            delEnclosure(row){
                this.enclosures.forEach(i=>{
                    if(i.time==row.time){
                        this.enclosures.pop();
                    }
                })
            },
            datetime(){
                let yy = new Date().getFullYear();
                let mm = new Date().getMonth()+1;
                let dd = new Date().getDate();
                let hh = new Date().getHours();
                let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
                let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
                var time = yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;
                return time;
            },
            Phonefh(){
                this.active--
            },
            getMaterialName(){
                this.price=''
                this.dialogVisible2=true
            },
            checked(checkedRow){
                this.dialogVisible2=false
                var a =[];
                checkedRow.forEach(i=>{
                    a.push({
                        'materialId':i.id+"",
                        'materialName':i.materialName,
                        'unitModel':i.unitModel,
                        'unit':i.unit,
                        'useCount':'',
                        'oilPrice':'',
                    })
                })
              this.materialInfos=a;
            },
            save(){

                if(this.DeviceOilUsed.pId=='' || this.DeviceOilUsed.pId==null ){
                    this.$message.error("请选择项目名称!")
                    return;
                }
                if(this.DeviceOilUsed.startdate=='' || this.DeviceOilUsed.startdate==null ){
                    this.$message.error("请选择开始时间!")
                    return;
                }
                if(this.DeviceOilUsed.enddate=='' || this.DeviceOilUsed.enddate==null ){
                    this.$message.error("请选择结束时间!")
                    return;
                }

                if(this.enclosures.length==0){
                    this.$message.error("请上传附件!")
                    return;
                }

                if(this.materialInfos[0].materialName =='' || this.materialInfos[0].materialName==null ){
                    this.$message.error("请选择设备!")
                    return;
                }
                this.materialInfos.forEach(i=>{
                    if(i.useCount=='' || i.useCount ==null ){
                        this.$message.error("请输入需用量!")
                        return;
                    }
                    if(i.oilPrice=='' || i.oilPrice ==null ){
                        this.$message.error("请输入油价!")
                        return;
                    }
                    if(i.useCount<0){
                        this.$message.error("请输入正确的需用量!")
                        return;
                    }
                    if(i.oilPrice<0){
                        this.$message.error("请输入正确的油价!")
                        return;
                    }
                })

                var params={}
                this.materialInfos.forEach(i=>{
                    i.usedFee=i.usedFee+""
                })
                params.enclosures=this.enclosures
                params.DeviceOilUsed=this.DeviceOilUsed
                params.materialInfos=this.materialInfos
                console.log(params);
                deviceOilUsedService.save(params).then(()=>{
                       this.$message.success("添加成功!");
                    this.$router.push({name:"sbyhmx"})
                })
            },
            update(){

                if(this.DeviceOilUsed.pId=='' || this.DeviceOilUsed.pId==null ){
                    this.$message.error("请选择项目名称!")
                    return;
                }

                if(this.DeviceOilUsed.startdate=='' || this.DeviceOilUsed.startdate==null ){
                    this.$message.error("请选择开始时间!")
                    return;
                }
                if(this.DeviceOilUsed.enddate=='' || this.DeviceOilUsed.enddate==null ){
                    this.$message.error("请选择结束时间!")
                    return;
                }
                if(this.enclosures.length==0){
                    this.$message.error("请上传附件!")
                    return;
                }

                if(this.materialInfos[0].materialName =='' || this.materialInfos[0].materialName==null ){
                    this.$message.error("请选择设备!")
                    return;
                }
                this.materialInfos.forEach(i=>{
                    if(i.useCount=='' || i.useCount ==null ){
                        this.$message.error("请输入需用量!")
                        return;
                    }
                    if(i.useCount<0){
                        this.$message.error("请输入正确的需用量!")
                        return;
                    }
                })
                var params={}

                this.enclosures.forEach(i=>{
                    i.id=i.id+""
                })
                for(var i =0;i<this.enclosures.length;i++){
                    this.enclosures[i].id=this.attids.split(",")[i]
                }
                params.enclosures=this.enclosures
                params.DeviceOilUsed=this.DeviceOilUsed
                this.materialInfos.forEach(i=>{
                    i.id=i.id+""
                    i.useCount=i.useCount+""
                    i.materialId=i.materialId+""
                    i.usedFee=i.usedFee+""
                })
                params.materialInfos=this.materialInfos
                deviceOilUsedService.update(params).then(()=>{
                    this.$message.success("修改成功!");
                    this.$router.push({name:"sbyhmx"})
                })


            },
            pd(){

            }

        },
        created() {

        },
        watch : {
            '$route' (to, from) {
                if(from.path=='/sbyhmx' &&  this.$route.params.search[1].label=='修改'){
                    console.log(this.$route.params.search[0]);
                    this.saveStatus=false;
                    this.updateStatus=true;
                    this.DeviceOilUsed=this.$route.params.search[0]
                    this.DeviceOilUsed.pId=this.$route.params.search[0].pid
                    deviceOilUsedService.selectEnclosures(this.$route.params.search[0].attachIds).then((response)=>{
                        this.attids = this.$route.params.search[0].attachIds;
                        this.enclosureTab=true;
                        response.data.data.forEach(i=>{
                            i.time=this.datetime(),
                             i.realName=sessionStorage.getItem("realName")
                        })
                        this.enclosures=response.data.data;
                    })
                    deviceOilUsedService.selectMaterialInfos(this.$route.params.search[0].id).then((response)=>{
                        this.materialInfos=response.data.data;
                    })
                }else{
                    this.DeviceOilUsed={}
                    this.enclosures=[]
                    this.materialInfos==[]
                }
            }
        },
        components:{
            ProjectTypeBigData,
            Photo,
            MaterialNameBigData
        }
    }
</script>

<style scoped>

</style>
